<template>

  <!-- 当props.onSale和props.guideToWish同时为true时，显示【特惠购票】 -->
  <div class="share-buy" v-if="props.onSale || props.guideToWish">
    <van-icon name="share-o" @click="showShare = true" size="30" color="#e54847" class="share" />
    <van-button round size="large" @click="gotoBuyTicket" color="#e54847" class="buy"
      v-if="props.onSale">特惠购票</van-button>

    <van-button round size="large" @click="onBuy" color="#e54847" class="wish"
      v-else-if="props.guideToWish">标记想看</van-button>

  </div>
  <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { useRoute } from 'vue-router';
const route = useRoute();

const router = useRouter();

const props = defineProps({
  //特惠购票
  onSale: {
    type: Boolean,

  },
  // 标记想看
  guideToWish: {
    type: Boolean,
  }
});
// const btnText = props.onSale ? '特惠购票' : '标记想看';
const showShare = ref(false);

const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};

const onBuy = () => {
  console.log('买');
};

const movieId = route.params.movieId;

const gotoBuyTicket = () => {
  router.push({ path: `/cinema/movie/${movieId}` })
};

</script>


<style scoped>
.share-buy {
  background-color: #fff;
  height: 50px;
  line-height: 1;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  position: fixed;
  height: 60px;
  bottom: 0px;
  width: 100%;

}

.share {
  cursor: pointer;
  margin: 5px 10px
}

.buy,
.wish {
  margin: 5px 10px
}
</style>
